<template>
  <div class="booking-page">
    <h1>酒店房间下单</h1>
    <form class="booking-form" @submit.prevent="submitForm">
      <label for="roomType">房间类型:</label>
      <select id="roomType" v-model="selectedRoomType">
        <option value="">请选择房间类型</option>
        <option v-for="roomType in roomTypes" :value="roomType">{{ roomType }}</option>
      </select>

      <label for="checkInDate">入住日期:</label>
      <input type="date" id="checkInDate" v-model="checkInDate">

      <label for="checkOutDate">退房日期:</label>
      <input type="date" id="checkOutDate" v-model="checkOutDate">

      <label for="customerName">顾客姓名:</label>
      <input type="text" id="customerName" v-model="customerName">

      <button type="submit">提交订单</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedRoomType: '',
      checkInDate: '',
      checkOutDate: '',
      customerName: '',
      roomTypes: ['标准间', '豪华套房', '海景房', '山景房']
    };
  },
  methods: {
    submitForm() {
      // 在这里可以发送表单数据到后端进行处理
      console.log('提交订单');
    }
  }
};
</script>

<style scoped>
.booking-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

.booking-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
}

label {
  font-size: 16px;
  margin-bottom: 10px;
}

input,
select {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}
</style>